﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Gallery.Models.Picture>" %>

<asp:Content ID="contactTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Contact - My ASP.NET MVC Application
</asp:Content>

<asp:Content ID="contactContent" ContentPlaceHolderID="MainContent" runat="server">
   
<div id="wrapper">
    <% int index = 0;
       int prev = 0;
       int next = 0;
       for (index = 0; index < ViewBag.pictures.Count; index ++)
       {
           if (ViewBag.pictures[index].Id == Model.Id)
           {
               index++;
               break;
           }
           
       }
       if (index == 1)
       {
           prev = ViewBag.pictures.Count;
           next = index + 1;
       }
       else if (index == ViewBag.pictures.Count)
       {
           prev = index - 1;
           next = 1;
       }
       else
       {
           prev = index - 1;
           next = index + 1;
       }
       
        %>
  <div id="wrapper-top">
     <div style="width: 400px; padding-top: 110px; padding-left: 10px; float:left">
        <a href="/home/index"><label style="font-size: 18px; color: #0054D7;">Home</label></a>
        <label style="font-size: 22px;"> > </label>
        <a href="/home/index"><label style="font-size: 18px; color: #0054D7;">Album List</label></a>
        <label style="font-size: 22px;"> > </label>
        <a href="/home/albumdetail?id=<%=Model.AlbumId %>"><label style="font-size: 18px; color: Red;"><%=ViewBag.albumname %></label></a>
    </div>
    <div style="float:left; margin-top: 10px;">   
       <img src="../images/logo.png" style="width: 130px; height: 130px;" alt="" />
        <img src="../images/logo1.png" style="width: 130px; height: 130px; " alt="" />
         <img src="../images/logo2.png" style="width: 130px; height: 130px; " alt="" />
     </div>
   
     <div style="padding-top: 20px; padding-left: 880px;"><input type="button" value="Log In" style="height: 30px; width: 90px;font-size:13px;"/></div>
  </div>
  <div id="left">
    <div class="logo"><a href="/home/index">Home</a></div>
    <ul class="menu">
      <li> <a class="opened" href="#">Album List</a>
        <ul class="sub-menu opened">
         <%foreach(var i in ViewBag.albums) %>
            <% { 
                 if(Model.AlbumId == i.Id)
                 {
                 %>
                      <li><a href="/home/albumdetail?id=<%=i.Id %>"class="selected"><%= i.Name %></a></li> 
                <%} else {%>
                        <li><a href="/home/albumdetail?id=<%=i.Id %>"><%= i.Name %></a></li>
                <%} %>           
            <% } %>
        </ul>
      </li>
    </ul>
    <div id="left-bottom">
    </div>
  </div>
  <div id="right">
    <div style="margin-left: 20px;margin-top: 40px; margin-bottom: 30px;">
            <div align="center">
                <label style="font-size: 30px;"><%=ViewBag.albumname %></label>
                          
            </div>
            <div style="margin-top: 30px;">
                <div style=" margin-top: 20px;">
                    <a href="/home/content?id=<%= ViewBag.pictures[prev -1].Id %>#right"><input type="button" value="Prev" style="height: 25px; width: 60px;font-size:13px; margin-left: 20px; margin-right: 230px;"/></a>
                     <a href="../images/albums/<%=Model.AlbumId %>/<%=Model.Image %>" rel="prettyPhoto[gallery]"><input style="height: 25px; width: 80px;font-size:13px;" type="button" value="SlideShow"/></a>
                    <label style="font-size: 15px; color: Red; margin-left: 180px;">( <%=index %> / <%=ViewBag.pictures.Count %> )</label>
                    <a href="/home/content?id=<%= ViewBag.pictures[next - 1].Id %>#right"><input type="button" value="Next" style="height: 25px; width: 60px;font-size:13px;margin-left: 10px;"/></a>
                   
                </div>
                <div style="display: none;">
                    <ul class="thumbnails">
                       
                        <% foreach (var i in ViewBag.pictures) {%>
                              <li ><a href="../images/albums/<%=Model.AlbumId %>/<%=i.Image %>" rel="prettyPhoto[gallery]"></a></li>
                        <%} %>
                      <%--<li ><a href="images/Pictures/Flowers/rose.jpg" rel="prettyPhoto[gallery]"></a></li>
                      <li ><a href="images/Pictures/Flowers/orchid.jpg" rel="prettyPhoto[gallery]"></a></li>
                      <li ><a href="images/Pictures/Flowers/sunflower.jpg" rel="prettyPhoto[gallery]"></a></li>--%>
                    </ul>         
                    
                  </div>
            </div>
    </div>        
        <div style="width: 600px; margin-left: 70px;" align="center">
             <a href="#">
                <img src="../images/albums/<%=Model.AlbumId %>/<%=Model.Image %>" alt="" style="max-width: 600px;max-height: 400px; border-style: solid; border-width: 7px;"/>
             </a>
             <p style="width: 600px; font-size: 17px; margin-top: 5px; color: Red" align="center"><%=Model.Name %></p>
         </div>
         <div style="margin-left: 30px; margin-top: 25px; margin-bottom: 20px;">            
                <div>
                    <img src="../images/admin.png" alt="" style="width: 60px;height: 60px; border-style: solid; border-width: 1px;" align="left" hspace="10"/>
                    <br />
                    <strong style="font-size: 20px; color:#0054D7;">Administrators</strong><br /><br />
                    <label style="font-size: 10px; color:#0054D7">Share</label>
                    <label style="font-size: 10px; color:#0054D7">Delete</label>
                </div>
                <br />
                <div style="margin-top: 10px; margin-left: 80px;">
                    <img src="../images/admin.png" alt="" style="width: 40px;height: 40px; border-style: solid; border-width: 1px;"/>
                    <input type="text" style="width: 500px; height: 30px; margin-bottom: 35px; font-size: 16px;" placeholder=" Write a comment. . ."/>
                </div>
         </div>
  <!--////////////////////////////////////////////////////////-->
    
 <!-- ////////////////////////////////////////////////////////   -->
  </div>
  <div id="wrapper-bottom">
        <div style=" padding-top: 30px;">
          <a href="#wrapper" style="color: Red; font-size: 15px;">Back to Top</a>
        </div>
  </div>
</div>


</asp:Content>